<template>
  <div class="layout">
    <Layout>
      <Header :style="{padding:'0'}">
        <div class="layout-logo"></div>
        <span class="layout-title">石家庄交管局审验后台管理系统</span>
        <Dropdown transfer class="layout-right-dropdown">
          <a href="javascript:void(0)" style="color: white">
            欢迎您：王栋
            <Icon type="ios-arrow-down"></Icon>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem>修改密码</DropdownItem>
            <DropdownItem divided>退出系统</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </Header>
      <Layout>
        <Sider class="layout-sider">
          <Menu width="auto" :open-names="[1]" accordion @on-select="to" @on-open-change="changeIndex">
            <Submenu :name="i" v-for="(owner,i) in menu" :key="owner.id">
              <template slot="title">
                <Icon :type="owner.icon"></Icon>
                {{owner.name}}
              </template>
              <MenuItem :name="module.id" v-for="(module) in owner.moduleVos" :key="module.id">{{module.name}}</MenuItem>
            </Submenu>
          </Menu>
        </Sider>
      </Layout>
      <Layout :style="{padding:'0 0 24px',margin:'0 0 0 200px'}">
        <Content :style="{padding: '0', minHeight: '280px', background: '#fff', height:'90vh',overflow:'auto'}">
          <div style="display: flex;
                                position: relative;
                                padding-left:10px;
                                height: 40px;
                                background: #f5f7f9;
                                align-items: center;
                                box-shadow: 0 2px 1px 1px rgba(100, 100, 100, 0.1);">
            <template>
              <Tag type="dot" checked
                   checkable closable color="error">
                123123
              </Tag>
            </template>
          </div>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
          Content
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  export default {
    name: 'my',
    data() {
      return {
        menu:[],
        index:-1
      }
    },
    computed:{
      test(){
        console.log('获取test');
        return 'test';
      }
    },
    methods:{
      to(name){
        this.menu[this.index].moduleVos.forEach(value=>{
          if (value.id===name){
            console.log(value.url);
            this.$router.push(value.url);
          }
        })
      },
      changeIndex(subName){
        if (subName.length===0){
          this.index=-1;
        }else if (subName.length===1) {
          this.index=subName[0];
        }else {

        }
      }
    },
    mounted(){
    },
    created(){
      this.$post("/getModule").then(data=>{
        this.menu=data.datas.map(value=>{
          value.id=parseInt(value.id);
          return value;
        });
        console.log(this.menu);
      });
    }
  }
</script>
<style lang="less">
</style>
